<template>
<div class="app-container">
  <el-form :inline="true" :model="form" class="demo-form-inline">
    <el-row>
      <span class="mes">时间类型：</span>
      <el-select v-model="form.type" placeholder="订单编号">
        <el-option label="下单时间" value="1"></el-option>
        <el-option label="平台派单时间" value="2"></el-option>
        <el-option label="商家派单时间" value="3"></el-option>
        <el-option label="服务时间" value="4"></el-option>
        <el-option label="支付时间" value="5"></el-option>
      </el-select>
      <el-date-picker type="fixed-time" placeholder="起始时间" v-model="form.date1">
      </el-date-picker>
      <el-time-picker type="fixed-time" placeholder="结束时间" v-model="form.date2">
      </el-time-picker>
      <el-button class="buttonall" @click="onSubmit" type="primary">查询</el-button>
    </el-row>
    <el-row>
      <el-select v-model="form.idType" placeholder="请选择">
        <el-option label="订单编号" value="1"></el-option>
        <el-option label="第三方交易号" value="2"></el-option>
      </el-select>
      <el-input v-model="form.String1" placeholder="请输入"></el-input>
      <el-select v-model="form.nameType" placeholder="请选择">
        <el-option label="手机账号" value="1"></el-option>
        <el-option label="用户昵称" value="2"></el-option>
      </el-select>
      <el-input v-model="form.String2" placeholder="请输入"></el-input>
      <span class="mes">退款状态：</span>
      <el-select v-model="form.refundType" placeholder="全部">
        <el-option label="全部" value="4"></el-option>
        <el-option label="退款失败" value="3"></el-option>
        <el-option label="退款中" value="1"></el-option>
        <el-option label="退款成功" value="2"></el-option>
      </el-select>
    </el-row>
  </el-form>

  <el-table :data="tableData" id="out-table">
    <el-table-column type="selection">
    </el-table-column>
    <el-table-column type="index">
    </el-table-column>
    <el-table-column
      v-for="item in tableList"
      :key="item._id"
      :prop="item.value"
      :label="item.name"
      align="center">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          @click="gotoDetail(scope.$index)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals">
    </el-pagination>
    <el-button class="upload" @click="exportExcel">导出excal
    </el-button>
  </div>
</div>
</template>

<script>
  import request from '@/utils/request'
  import { formatDate,toDate,toUnix } from '@/utils/index'
  import { validateOrderStatus,Excel,trade,payType } from '@/utils/validate'
  export function getList(mes) {
    return request({
      url: '/v1/admin/financialManage/refund/list',
      method: 'post',
      data: mes
    })
  }
  export default {
    created: function (){
      const obj = {
        page: 1,
        size: 10,
        order_status: 4
      }
      this.getMes(obj)
    },
    methods: {
      getMes(item) {
        getList(item).then(res => {
          if (res.code === 200) {
            console.log(res);
            if (res.data.list.length) {
              this.setTableData = res.data.list
              this.totals = res.data.totalNumber
              res.data.list.map(item => {
                const val = {
                  nickname: item.user_id.nickname,
                  phone: item.user_id.user_phone,
                  id: item._id,
                  third: item.thirdy_pay_order || '--',
                  order_money: item.order_money || '--',
                  busniess_name: item.busniess_name || '--',
                  payMon: item.order_pay_money,
                  reward_money: item.reward_money,
                  reach_account_money: item.reach_account_money,
                  reward_money: item.order_money || '--',
                  reward_res: item.refund_reason_text || '--',
                  pay_time: item.pay_time ? formatDate(new Date(item.pay_time * 1000), 'yyyy-MM-dd hh:mm') : '--',
                  get_time: item.reach_account_money ? formatDate(new Date(item.reach_account_money * 1000), 'yyyy-MM-dd hh:mm') : '--',
                  refund_time: item.refund_time ? formatDate(new Date(item.refund_time * 1000), 'yyyy-MM-dd hh:mm') : '--',
                  order_status: trade(item.order_status)
                }
                this.tableData.push(val)
              })
            }
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            });
          }
        }).catch(error => {
          this.$message({
            message: error,
            type: 'error'
          });
        })
      },
      gotoDetail(index){
        localStorage.setItem('refundMes', JSON.stringify(this.setTableData[index]))
        this.$router.push({
          path: '/refundList/refundMes'
        })
      },
      onSubmit() {
        this.tableData = []
        const item = {
          page: 1,
          size: this.size,
          search_time_type: this.form.type,
          search_begin_time: toUnix(toDate(this.form.date1)),
          search_end_time: toUnix(toDate(this.form.date2)),
          search_type: this.form.idType,
          searchString: this.form.String1,
          order_status: this.form.refundType,
        }
        this.getMes(item)
      },
      exportExcel() {
        Excel('#out-table')
      },
      handleSizeChange(val) {
        this.tableData = []
        let obj = {
          size: val,
          page: 1,
          order_status: 4
        }
        this.getMes(obj)
        this.size = val
      },
      handleCurrentChange(page) {
        this.tableData = []
        let obj = {
          page: page,
          size: this.size,
          order_status: 4
        }
        this.getMes(obj)
      }
    },
    data() {
      return {
        form: {
          type: '',
          date1: '',
          date2: '',
          idType: '',
          String1: '',
          nameType: '',
          String2: '',
          refundType: 4
        },
        tableData: [],
        tableList: [
          { name: '用户昵称', value: 'nickname' },
          { name: '手机号码', value: 'phone' },
          { name: '订单编号', value: 'id' },
          { name: '第三方交易号', value: 'third' },
          { name: '订单金额', value: 'order_money' },
          { name: '实付金额', value: 'payMon' },
          { name: '到账金额', value: 'reach_account_money' },
          { name: '退款金额', value: 'reward_money' },
          { name: '退款原因', value: 'reward_res' },
          { name: '支付时间', value: 'pay_time' },
          { name: '到账时间', value: 'get_time' },
          { name: '退款时间', value: 'refund_time' },
          { name: '状态', value: 'order_status' },
        ],
        currentPage: 1,
        size: 10,
        totals: 0,
      }
    }
  }
</script>
<style scoped>
  .el-col{
    margin: 5px;
  }
  .el-row{
    margin: 10px 0;
  }
  .demo-input-suffix div{
    margin-right: 10px;
  }
  .el-table{
    margin-bottom: 10px;
  }
  .el-select{
    width: 160px;
  }
  .upload{
    float: right;
  }
  .el-input{
    width: 200px;
  }
  .collageAdd{
    float: right;
  }
  .block{
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  .mes{
    margin-left: 10px;
  }
</style>
